<template>
  <div>
    <div style="width: 1150px;margin-left: auto;margin-right: auto;text-align: center;margin-top: 10px;">
      <el-input v-model="shenhequery.rolename" placeholder="被申请角色" style="width: 200px;float: left;"></el-input>
      <!-- <el-input v-model="userlogquery.content" placeholder="审核状态" style="width: 200px;float: left;margin-left: 15px;"></el-input> -->
      <el-select v-model="shenhequery.status" placeholder="请选择审核状态" style="width: 200px;float: left;margin-left: 15px;">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      <el-input v-model="shenhequery.starttime" type="date" placeholder="最早登录时间" style="width: 165px;float: left;margin-left: 15px;"></el-input>
      <el-input v-model="shenhequery.endtime" type="date" placeholder="最晚登录时间" style="width: 165px;float: left;margin-left: 10px;"></el-input>
      <el-button @click="chongzhi" type="infor" style="float: left;margin-left: 10px;">重置</el-button>
      <el-button @click="chaxun" type="primary" style="float: left;">查询</el-button>
      <el-button type="warning" style="float: right;">导出</el-button>
    </div>

    <el-table
      :data="shenheresponses"
      style="width: 1150px;margin-left: auto;margin-right: auto;text-align: center;">
      <el-table-column
        label="用户名"
        align="center"
        width="160px">
        <template slot-scope="scope">

            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.username }}</el-tag>
            </div>

        </template>
      </el-table-column>
      <el-table-column
        label="申请角色"
        align="center"
        width="180px">
        <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.rolesname }}</el-tag>
            </div>
        </template>
      </el-table-column>
      <el-table-column
        label="申请事由"
        align="center"
        width="210px">
        <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
             {{ scope.row.content }}
            </div>
        </template>
      </el-table-column>
      <el-table-column
      align="center"
        label="审核状态"
        width="120px">
        <template slot-scope="scope">
            <div v-if="scope.row.status==0" slot="reference" class="name-wrapper">
              审核中
            </div>
            <div v-if="scope.row.status==1" slot="reference" class="name-wrapper">
              已通过
            </div>
            <div v-if="scope.row.status==2" slot="reference" class="name-wrapper">
              未通过
            </div>
        </template>
      </el-table-column>
      <el-table-column
      align="center"
        label="备注"
        width="180px">
        <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              {{ scope.row.response }}
            </div>
        </template>
      </el-table-column>
      <el-table-column
      align="center"
        label="上次处理时间"
        width="180px">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.gmtModified }}</span>
        </template>
      </el-table-column>
      <el-table-column
      align="center"
        label="操作"
        width="120px">
        <template slot-scope="scope">
          <el-button :disabled="scope.row.status!=0" @click="into(scope.row)">进入审批</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="block" style="width: 1150px;margin-left: auto;margin-right: auto;">
        <el-pagination
        style="text-align: center;"
        background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="shenhequery.current"
          :page-sizes="[9, 15, 30, 40]"
          :page-size="shenhequery.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="shtotal">
        </el-pagination>
      </div>
      <!-- 审核弹出框 -->
      <el-dialog
        title="审批流程"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <div style="margin-top: -30px;">
          <span style="font-size: 14px;color: #85989C;">用户名: </span>
          <el-tag>{{username}}</el-tag>
        </div>
        <div style="margin-top: 10px;">
          <span style="font-size: 14px;color: #85989C;">申请角色: </span>
          <el-tag>{{tempsh.rolesname}}</el-tag>
        </div>
        <div style="margin-top: 10px;">
          <el-input
            type="textarea"
            :rows="3"
            placeholder="无内容"
            :disabled="true"
            v-model="tempsh.content">
          </el-input>
        </div>
        <div v-if="radio4=='2'" style="margin-top: 10px;">
          <el-input
            type="textarea"
            :rows="3"
            placeholder="请输入不同意的原因"
            v-model="tempsh.response">
          </el-input>
        </div>
        <div style="margin-top: 10px">
            <el-radio-group @change="tongyi" v-model="radio4" size="mini">
              <el-radio label="1" border>同意</el-radio>
              <el-radio label="2" border>不同意</el-radio>
            </el-radio-group>
          </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="quxiao">取 消</el-button>
          <el-button type="primary" @click="tijiao">提 交</el-button>
        </span>
      </el-dialog>

  </div>

</template>

<script>
  import usermethod from '@/api/user/user'
  export default {
    data() {
      return {
        radio4:'1',

        //审核信息查询信息
        shenhequery:{
          rolename:'',
          status: 0,
          starttime: null,
          endtime: null,
          current: 1,
          limit: 8
        },
        options: [{
                  value: 0,
                  label: '审核中'
                }, {
                  value: 1,
                  label: '已通过'
                }, {
                  value: 2,
                  label: '未通过'
                }],
        value: 0,
        shenheresponses:null,
        // 分页参数
        shtotal: 0,
        dialogVisible: false,
        username: '',
        tempsh:{
          id: '',
          rolesname: '',
          content: '',
          response: '',
          status: null
        }
        // tempsh:null
      }
    },
    created(){
      this.getsh()
    },
    methods: {
      tongyi(){
        if(this.radio4=='1'){
          this.tempsh.response=''
        }
        this.tempsh.response=''
      },
      //获取日志数据
      getsh(){

       //个数
       usermethod.getshenhnumquery(this.shenhequery).then(response => {
         this.shtotal=response.data.a
       })
       //获取审核列表
       usermethod.getshps(this.shenhequery).then(response => {
         this.shenheresponses=response.data.shenheresponses
       })


      },
    //分页
    handleSizeChange(val) {
            this.shenhequery.limit=val
            this.shenhequery.current=1
            this.getsh()

          },
          handleCurrentChange(val) {
           this.shenhequery.current=val
           this.getsh()
          },
    //重置和查询
    chongzhi(){

      this.shenhequery.rolename=''
      this.value=0
      this.shenhequery.starttime=null
      this.shenhequery.endtime=null
    },
    chaxun(){
      this.shenhequery.current=1
      this.getsh()
    },
     handleClose(done) {
            this.$confirm('确认关闭？')
              .then(_ => {
                this.username=''
                this.tempsh.content=''
                this.tempsh.id=''
                this.tempsh.response=''
                this.tempsh.rolesname=''
                this.tempsh.status=''
                this.radio4='1'
                this.dialogVisible=false
                done();
              })
              .catch(_ => {});
          },
          into(row){
            console.log(row)
            this.username=row.username
            this.tempsh.content=row.content
            this.tempsh.id=row.hid
            this.tempsh.response=row.response
            this.tempsh.rolesname=row.rolesname.substring(0,row.rolesname.length-1)
            this.tempsh.status=row.status
            this.dialogVisible=true

          },
          quxiao(){
            this.username=''
            this.tempsh.content=''
            this.tempsh.id=''
            this.tempsh.response=''
            this.tempsh.rolesname=''
            this.tempsh.status=''
            this.radio4='1'
            this.dialogVisible=false

          },
          tijiao(){
            if(this.radio4=='2' && this.tempsh.response==''){
              this.$message.error('不同意的情况要填写不同意的原因')
            }
            //同意
            if(this.radio4=='1'){
              usermethod.tongyish(this.tempsh).then(response => {
                if(response.data.a==true){
                  this.$message.success('审核处理成功')
                  this.quxiao()
                  this.getsh()
                }else{
                  this.$message.error('审核处理失败')
                  this.quxiao()
                  this.getsh()
                }
              })
            }
            if(this.radio4=='2'){
              usermethod.butongyi(this.tempsh).then(response => {
                if(response.data.a==true){
                  this.$message.success('审核处理成功')
                  this.quxiao()
                  this.getsh()
                }else{
                  this.$message.error('审核处理失败')
                  this.quxiao()
                  this.getsh()
                }
              })
            }
          }
    }
  }
</script>
<style>
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>
